<template>
    <PopList :title="'环绕地球'">
        <LabelInput v-model="latitude" :label="'纬度'" :unit="'°'"></LabelInput>
        <LabelInput v-model="height" :label="'高度'" :unit="'m'"></LabelInput>
        <LabelInput v-model="surroundingPeriod" :label="'周期'" :unit="'s'"></LabelInput>
    </PopList>
</template>

<script setup lang="ts">
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import PopList from '../../../components/PopList.vue';
import { XbsjEarthUi } from '../../../scripts/xbsjEarthUi';
import LabelInput from "../../../components/LabelInput.vue"
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const emits = defineEmits(['close', 'ok'])
const latitude = ref<number>(38)//纬度0-90
const height = ref<number>(10000000)//高度200000-280430000
const surroundingPeriod = ref<number>(60)//环绕周期1-600
watch([latitude, height, surroundingPeriod], () => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToRotateGlobe(latitude.value, height.value, surroundingPeriod.value)
})
onMounted(() => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToRotateGlobe(latitude.value, height.value, surroundingPeriod.value)
    xbsjEarthUi.roamMode = 'RotateGlobe'
})
onBeforeUnmount(() => {
    // const viewer = xbsjEarthUi.activeViewer
    // if (!viewer) return
    // viewer.changeToMap()
    // xbsjEarthUi.roamMode = 'Map'
})
</script>
